<template>
  <div>
    <TableVue
      @edit="openForm"
      ref="tableRef"
      @create="modalVisible = true"
      :query="query"
      :table="table"
    />
    <FormVue v-if="t" v-model:form="form" @submit="reload" v-model="modalVisible" />
  </div>
</template>

<script setup lang="ts">
import TableVue from "./components/Table.vue";

import { Cross } from "@/api/service/lcd-device/cross";
import FormVue from "./components/Form.vue";

const tableRef = ref();
const t = translate("公共模块");
const modalVisible = ref(false);

const query = useQuery<Cross>({
  isAsc: "desc"
});

const table = useTable<Cross>({
  rowKey: "id"
});

const form = ref<Cross>({
  name: "",
  num: 2,
  resource: [],
  deptId: ""
});

const openForm = (data: Cross) => {
  modalVisible.value = true;
  form.value = {
    ...data
  };
};
const reload = () => {
  tableRef.value?.search();
};
</script>

<style lang="scss" scoped></style>
